<!doctype html>
<html>

<head>

    <!-- meta tags -->
    <meta charset="utf-8">
    <meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
    <meta name="description" content="Bootstrap 4 Landing Page Template" />
    <meta name="author" content="www.themesground.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Title -->
    <title></title>

    <!-- Favicon Icon -->
    <link rel="shortcut icon" href="../assets/images/pagepig.ico" />
    <!-- inject css start -->
    <link href="../assets/css/theme-plugin.css" rel="stylesheet" />
    <link href="../assets/css/theme.min.css" rel="stylesheet" />
    <link href="../assets/css/all.css" rel="stylesheet" />
    <link href="../assets/css/category2.css" rel="stylesheet" />

    <!-- inject css end -->
    <style>
        h2 h1 {
            display: inline;
        }

        .bot {
            position: absolute;
            bottom: 0px;
            margin: 0px 0px 0px 436px;
        }

        #wh {
            height: 262.5px;
            position: relative;
        }
        .haha{
            height: 125px;
            width: 416px;
        }
    </style>
</head>

<body>

<!-- 引入head -->
<div class="head"></div>
<!-- page wrapper start -->

<div class="page-wrapper">

    <!-- preloader start -->

    <div id="ht-preloader">
        <div class="loader clear-loader"> <img class="img-fluid" src="../assets/images/loader.gif" alt=""> </div>
    </div>

    <!-- preloader end -->

    <!--hero section start-->

    <section class="bg-light py-4">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="h2 mb-0">印象中的那些妈妈的味道</h1>
                </div>
                <div class="col-md-6 mt-3 mt-md-0">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-md-end bg-transparent p-0 m-0">
                            <li class="breadcrumb-item"><a class="link-title" href="http://127.0.0.1:8888/page/index.html">主页</a>
                            </li>
                            <li class="breadcrumb-item active text-primary" aria-current="page">菜谱</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!-- / .row -->
        </div>
        <!-- / .container -->
    </section>

    <!--hero section end-->


    <!--body content start-->

    <div class="page-content">

        <section>
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 col-md-12">
                        <div class="row mb-4 align-items-center">
                            <div class="col-md-5 mb-3 mb-md-0">
                                <div class="collect_dp">
                                    <a title="猪肉"><img alt="猪肉" id="category_pic" class="imgLoad" src="https://i3.meishichina.com/attachment/ingredient/2012/03/22/20120322142225412671609.jpg" width=90 height=90></a>
                                    <h1 id="z">猪肉</h1>
                                    <span>为你介绍猪肉营养与选购，以及猪肉的7414种做法</span>
                                </div>
                            </div>
                            <div class="col-md-7 d-flex align-items-center justify-content-md-end">
                                <input type="text" class="form-control" id="searchNameId" />
                                &nbsp;&nbsp;
                                <input class="btn btn-success btn-search" type="button" value="查询" />
                            </div>
                        </div>

                        <div class="ui_title_wrap clear ">
                            <h2 class="on"><a href="#">猪肉的做法</a></h2>
                            <h2><a href="#">认识与选购</a></h2>
                            <h2><a href="#">食用宜忌</a></h2>
                            <h2><a href="#">营养功效</a></h2>
                        </div>
                        <div id="pageId1">

                        </div>
                        <div id="pageId">

                        </div>



                    </div>
                    <div class="col-lg-3 col-md-12 sidebar mt-8 mt-lg-0">
                        <div>
                          <div class="widget widget-categories mb-4 border rounded">
                              <a href="http://www.tedu.cn/"> <img src="../assets/images/tedu02.jpg"></a>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!--body content end-->

    <!--back-to-top start-->

    <div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>
</body>
    <!--back-to-top end-->
<!-- 引入footer -->
<div class="footer"></div>
    <!-- inject js start -->

    <script src="../assets/js/jquery-3.5.1.min.js"></script>
    <script src="../assets/js/popper.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
<!--    <script src="../assets/js/owl.carousel.min.js"></script>-->
    <script src="../assets/js/light-slider.js"></script>
    <script src="../assets/js/parallax.js"></script>
    <script src="../assets/js/magnific-popup.min.js"></script>
    <script src="../assets/js/jquery.countdown.min.js"></script>
    <script src="../assets/js/jquery.dd.min.js"></script>
    <script src="../assets/js/validator.js"></script>
    <script src="../assets/js/wow.js"></script>
    <script src="../assets/js/theme-script.js"></script>

    <!-- inject js end -->
    <script>
        $(document).ready(function() {

            $("#pageId").load("/page/page", function() {

                doGetObjects();
            });
            $(".col-md-7")
                .on("click", ".btn-search", doQueryObjects)
        });

        function doGetObjects() {
            $("#pageId1").empty()
            var pageCurrent = $("#pageId").data("pageCurrent");
            if (!pageCurrent) pageCurrent = 1;
            var params = {
                "pageCurrent": pageCurrent
            };
            var name = $("#searchNameId").val();
            if (name) params.username = name;

            let url = "/recipes/doFindRecipes";
            $.getJSON(url, params, function(result) {
                console.log(result);
                if (result.status == 200) {
                    doCreatedLi(result.data.records);
                    doSetPagination(result.data)
                } else {
                    alert(result.message)
                    // doGetObjects();
                }


            });
        }

        function doQueryObjects() {
            doGetObjects();
        }

        function doCreatedLi(data) {
            for (i = 0; i < data.length; i++) {
                let url = "/page/doDetail?id=" + data[i].id;
                let div = `<div class="card product-list mb-5">
              <div class="row align-items-center">
                <div class="col-lg-4 col-md-5">
                  <a class="card-img-hover d-block" title=${data[i].menuName} href=${url}>
                    <img class="card-img-top card-img-back" src="${data[i].finishedImg}" alt="${data[i].menuName}">
                  </a>
                </div>
                <div class="col-lg-8 col-md-7"  id="wh">
                  <div class="card-info">
                    <div class="card-info">
                    <div id="block_txt1"><span class="txt_tart">&ensp;&ensp;&ensp;&ensp;“</span>${data[i].described}<span class="txt_end">” </span>
        </div>
                    <div class="card-footer bg-transparent border-0">
                      <div class="product-link d-flex align-items-center">

                      </div>
                    </div>

                  </div>
                  <a href=${url}><button type="button" class="btn btn-info bot">详情</button></a>

                </div>

              </div>
            </div>`
                $("#pageId1").append(div);
            }
        }
    </script>
<script type="text/javascript">
    //在js中引入head与footer
    $(document).ready(function () {
        $('.head').load('head.html');
        $('.footer').load('footer.html');
    });
</script>

</html>